<template>
    <div>
        <img src="../../assets/img/aboutus/banner2.png" class="banner"/>
        <div class="aboutus" >
            <div class="title">
                <div class="line"></div>
                关于我们
                <div class="line"></div>
            </div>
            <div class="item">
                <img src="../../assets/img/aboutus/logo1.png" class="us"/>
                <div class="text">
                    宅寂家居致力于为用户提供综合家居产品和服务解决方案<br>

                    产品涵盖套房家具、实木家具、沙发、软床和定制家具等，<br>

                    期待为您和您的家人带来美好的家居生活体验
                </div>
            </div>
            <div class="item">
                <img src="../../assets/img/aboutus/logo2.png" class="us usl"/>
                <div class="text textl">
                    我们可以为您提供全面服务——从设计和选料，<br>

                    到施工和装修以及收尾。<br>

                    我们致力于为您提供每个需求中的最佳解决方案。
                    <div class="more">了解详情 ></div>    
                </div>
            </div>
            <div class="item">
                <img src="../../assets/img/aboutus/logo3.png" class="us"/>
                <div class="text">
                    我们承诺，百分百匠心制作，30天无忧退货，<br>

                    免费上门送货并安装<br>

                    我们致力于为您服务每一个细节。
                        
                </div>
            </div>

            <div class="title">
                <div class="line"></div>
                加入我们
                <div class="line"></div>
            </div>
        </div>
        <div class="joinbanner">
            <img src="../../assets/img/aboutus/joinus.png" class="banner"/>
            <div class="more joinmore">了解详情 ></div>   
        </div>
        <div class="suggest">
            <img src="../../assets/img/aboutus/pen.png" class="pen"/>
            <div class="title suggestTitle">
                <div class="line"></div>
                我要提建议
                <div class="line"></div>
            </div>
            <!-- <input type="text" placeholder="请输入您的姓名">
            <input type="text" placeholder="请输入您的电话">
            <input type="text" placeholder="请输入您的邮箱">
            <textarea placeholder="请输入对宅寂的建议"></textarea>
            <div class="more submit" @click="clear()">
                <div class="submitimg"></div>
                <button type="submit">点击提交 </button>
            </div>    -->
            <form action="" method=""  >
                <input type="text" placeholder="请输入您的姓名">
                <input type="text" placeholder="请输入您的电话">
                <input type="text" placeholder="请输入您的邮箱">
                <textarea placeholder="请输入对宅寂的建议"></textarea>
                <div class="more submit">
                    <div class="submitimg"></div>
                    <button type="submit" class="submitBtn" @click="submit()">点击提交 </button>
                </div>    
            </form>
            
        </div>
        <!-- <b-alert :show="dismissCountDown"
                    dismissible
                    fade
                    variant="warning"
                    @dismissed="dismissCountDown=0"
                    @dismiss-count-down="countDownChanged" class="alert">
            &nbsp;&nbsp;&nbsp;感谢您的建议！diamiss {{dismissCountDown}} seconds...
        </b-alert> -->
    </div>
</template>

<script>
export default {
    data(){
        return {
            // dismissSecs: 5,
            // dismissCountDown: 0,
        }
    },
    methods: {
        // countDownChanged (dismissCountDown) {
        //     this.dismissCountDown = dismissCountDown
        // },
        // submit(){
        //     this.dismissCountDown = this.dismissSecs;
        // }

        
    },
}

</script>

<style scoped lang="scss">
    .banner{
        width : 100%;
    }
    .aboutus{
        width:62.8%;
        margin: 0 auto;
    }
    .line{
        width:1.52rem;
        height:0rem;
        border:0.007rem solid rgba(180,157,126,1);
        display: inline-block;
        vertical-align: middle;
    }
    .title{
        font-size:0.48rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        text-align: center;
        margin: 1.18rem 0 1.22rem;
        vertical-align: middle;
    }
    .item{
        overflow: hidden;
        margin-bottom: 1.41rem;
    }
    .us{
        width:3.32rem;
        height:0.90rem;
        margin-top:0.5rem;
    }
    .usl{
        float: right;
        margin-top:1rem;
    }
    .text{
        width:6.5rem;
        height:3rem;
        background:linear-gradient(92deg,rgba(242,242,242,1),rgba(232,232,232,1));
        font-size:0.24rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        float: right;
        text-align: center;
        line-height: 0.58rem;
        padding-top: 0.6rem;
    }
    .textl{
        float: left;
    }
    .more{
        width:1.06rem;
        height:0.3rem;
        background:rgba(180,157,126,1);
        box-shadow:0px 3px 7px 0px rgba(0, 0, 0, 0.36);
        border-radius:10px;
        font-size:0.15rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height: 0.3rem;
        margin: 0.2rem auto 0;
        cursor: pointer;
    }
    .joinbanner{
        position: relative;
    }
    .joinmore{
        position: absolute;
        top:3.68rem;
        right: 1.72rem;
        text-align: center;
    }
    .suggest{
        width:62.8%;
        height: 8.3rem;
        background:rgba(234,234,234,1);
        margin: 1.48rem auto 1.13rem;

    }
    .pen{
        width:1.08rem;
        display: block;//!!!
        margin: 0 auto;
    }
    .suggestTitle{
        margin: 0.3rem auto 0;
    }
    input{
        width:4.13rem;
        height:0.81rem;
        background:rgba(238,238,238,1);
        font-size:0.3rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        margin-left: 0.93rem;
    }
    textarea{
        width:9.43rem;
        height:1.48rem;
        background:rgba(238,238,238,1);
        font-size:0.3rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(67,67,67,1);
        margin: 0.72rem 0 0 0.93rem
    }
    .submit{
        width: 1.5rem;
        height: 0.43rem;
        position: relative;
        font-size:0.18rem;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(239,235,235,1);
        margin: 0 auto 0.2rem;
        line-height: 0.43rem;
    }
    .submitimg{
        height:0.43rem;
        width:0.6rem;
        background-image: url(../../assets/img/icons/sprite3.png);
        background-position:-0.2rem 0;
        display: inline-block;
        vertical-align: middle;
        float: left;
    }
    .submitBtn{
        border: 0;
        float: left;
        background: none;
        color: #fff;
        padding: 0;
        line-height: 0.45rem;
    }
</style>
<style>
.alert-dismissible{
    padding: 0
}
.alert{
    padding: 0.1rem 0.1rem ;
    font-size: 0.2rem;
    width:5rem;
    position: absolute;
    top: 3rem;
    left: 40%;
}
.alert-dismissible .close{
    padding: 0.05rem 0.05rem ;
    right: 0.07rem;
    top: -0.02rem;
}
.close{
    font-size: 0.4rem
}
</style>
